<template>
  <div class="myChildren1">
    <!-- 我的孩子 -->
    <div v-if="0==Show" >
      <div class="mychildrenheader">
          <span class="headerchildren">我的孩子</span>
      </div>

      <div class="messageNavigation"
       :key="index" 
       @click="ChildrenmessageShow(item, index)"
       v-for="(item, index) in childList">
        <div class="touxiang">
          <img class="img5" :src="`${ src1 + item.avatar }`" v-if="item.avatar!==''">
          <img class="img5" src="@/assets/images/boy.png" v-if="item.avatar==''&&item.sex==0">
          <img class="img5" src="@/assets/images/girl.png" v-if="item.avatar==''&&item.sex==1">
        </div>
           
          <div class="selfmessage">
              <div class="name">
              <span>{{item.stuName}}</span>
              </div>
              <div class="classmatch">
              <span>班级:{{item.gradeId}}</span>
              </div>
              <div class="card">
              <span>身份证号:{{item.idCard}}</span>
              </div>
          </div>
          <i class="el-icon-arrow-right" style="margin-right:.625rem;font-size:2rem"></i>
      </div>
    </div>
    
      <!-- 孩子信息 -->
      <Childrenmessage v-if="1==Show">
          <button slot="back" style="border:0;background:#fff;flex-direction:row;display:flex;" @click="back1()">
              <i class="el-icon-arrow-left" style="font-size:2rem"></i>
          </button>

          <div slot="stuAvatar" class="rightinfo" @click="Show=2" style="position:relative">
            <div class="touxiang2">
              <img :src="`${ src1 + clickData.avatar }`" class="img1" v-if="clickData.avatar!==''">
              <img src="@/assets/images/boy.png" class="img1" v-if="clickData.avatar==''&&clickData.sex==0">
              <img src="@/assets/images/girl.png" class="img1" v-if="clickData.avatar==''&&clickData.sex==1">
            </div>
            <div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div slot="stuName" class="rightinfo">{{clickData.stuName}}</div>
          <div slot="sex" class="rightinfo">{{clickData.sex==0?'男':'女'}}</div>
          <div slot="gradeId" class="rightinfo">{{clickData.gradeId}}</div>
          <div slot="idCard" class="rightinfo1">{{clickData.idCard}}</div>
      </Childrenmessage>
      <!--上传头像-->
      <headsculpture v-if="2==Show" :val="studentId">
          <button slot="back" style="border:0;background:#fff;flex-direction:row;display:flex;" @click="back2()">
              <i class="el-icon-arrow-left" style="font-size:2rem"></i>
          </button>
      </headsculpture>
  </div>
</template>

<script>
import Childrenmessage from "./Childrenmessage";
import headsculpture from './headsculpture';
import { getChild } from "@/api/myInfo/index";
import module from "@/allurlimg/img";

export default {
  components: {
      Childrenmessage,
      headsculpture
  },
  data(){
    return {
      isReloadData:true,
      src1:'',
      imageUrl: '',
      childList:[],
      clickData:[],
      Show:0,
      studentId:''
    };
  },
  methods:{
    reloadPart(){
       this.isReloadData = false
       this.$nextTick(()=>{
        this.isReloadData = ture
       })
    },
    ChildrenmessageShow(item){
        // console.log(item)
        this.studentId=item.stuId
        // console.log(this.studentId)
        this.Show = 1
        this.clickData = item
        // console.log(this.clickData)
        // this.$router.push({name:'Childrenmessage',params:{message:item}})
      },
      async gets(){
          const res = await getChild({})
          console.log(res)
          // console.log(res.data)
          this.childList = res.data
          // console.log("111",this.childList)   
      },
      // async changephoto(){
      //     const res =await huanavatar({student:this.student})
      //     this.huanList = res.data
      //     console.log(this.huanList)
      // },
      back1(){
        this.Show=0,
        this.gets()
      },
      back2(){
        this.Show=0,
        this.gets()
      },
  },
  created(){
      this.gets()
      // this.changephoto()  
      this.src1 = module.host
  },
}
</script>

<style scoped>
.img5{
  width: 100%;
  height:100%;
  /* height: 4.375rem;
  border-radius: 50%;
  margin-left: 1.875rem; */
}

/* 侧边内容导航 */
.contentItem{
  height:3.125rem;
  width: 13.875rem;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(124, 0, 0, 1);
  border: .0625rem solid rgba(247, 248, 250, 1);
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}
.headerchildren{
  font-size: 1.5625rem;
  margin-left:37.5rem;
}
.family{
  width: 3.125rem;
  height: 1.5625rem;
  display: block;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(124, 0, 0, 1);
  text-align: center;
  margin-bottom: .625rem;
  border-radius: .3125rem;
}
.children{
  margin-left: 1.875rem;
}
/* 右侧内容 */
.myChildren1{
  height: 44.375rem;/**/
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  text-align: center;
  border: .0625rem solid rgba(245, 245, 245, 1);
  margin-top: 2.5rem;
  /* margin-left: 15px; */
}
/* 头部我的孩子 */
.mychildrenheader{
  height: 3.6875rem;
  display: flex;
  align-items: center;
  text-align: center;
}
.messageNavigation{
  width: 100%;
  height: 8.125rem;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  border: .0625rem solid rgba(245, 245, 245, 1);
  cursor:pointer;
}
.name{
  font-size: 1.25rem;
  margin-right: 37.5rem;
}
.classmatch{
  margin-right: 35.625rem;
  color: rgba(153, 153, 153, 1);
}
.selfmessage{
  margin-right: 28.125rem;
  height:5rem;
  width: 43.75rem;
  
}
.card{
  display: block;
  width: 31.25rem;
  color: rgba(153, 153, 153, 1);
}
.card span{
  margin-right: 14.375rem;
}
.icon-you-copy{
  font-size: 1.875rem;
  color: rgba(153, 153, 153, 1);
  margin-right: 1.25rem!important;
}


.main {
display: flex;
flex-direction: row;
margin: 1.25rem 9.75rem 10rem 9.75rem;
}

/* 左侧导航区 */
.left-each {
display: flex;
flex-direction: column;
width: 13.75rem;
height: 44.375rem;
margin: 2.5rem 1.25rem;
background: #f5f5f5;
}

/* 信息框 */
.top-each {
display: flex;
flex-direction: row;
height: 5rem;
}

/* 头像 */
.top-each .right-photo {
width: 4.375rem;
height: 4.375rem;
border-radius: 50%;
background: #e4eefa;
margin: .3125rem;
}

/* 右侧信息框 */
.top-each .left-each {
display: flex;
flex-direction: column;
margin: .625rem;
height: 3.75rem;
}

/* 身份信息 */
.top-each .left-partiarch {
width: 3.75rem;
height: 1.25rem;
font-size: .75rem;
margin-top: .4375rem;
border-radius: .3125rem;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: #7C0000;
}

/* 查看 */
.top-each .left-more {
display: flex;
font-size: .75rem;
margin-top: .4375rem;
height: 1.25rem;
border-radius: .3125rem;
padding: .125rem .4375rem;
color: #000000;
border: 0rem solid;
background: #f5f5f5;
}

/* 导航栏 */
.left-each .each {
border: .0625rem solid #f7f8fa;
padding: .875rem 0 .875rem 0rem;
background: #fff;
font-size:1.25rem;
}

/* 点击触发 */
.left-each .active{
background: #7c0000;
color: #ffffff;
}
/*头像照片*/
.img{
height:4rem;
width:4.375rem;
}
.rightinfo{
display: flex;
justify-content: space-between;
height:1.25rem;
width:6.25rem;
}

.rightinfo1{
  margin-right:8.75rem;
  height:1.25rem;
  width:3.125rem;
}

.img1{
/* height: 1.875rem;
width: 2.5rem;
border-radius:50%; */
width:100%;
height:100%;
}

.touxiang{
height:4.375rem;
width:4.375rem;
margin-left:1.875rem;
border-radius:50%;
display:flex;
align-items:center;
overflow:hidden;
}

.touxiang2{
height:2rem;
width:2.5rem;
border-radius:50%;
display:flex;
align-items:center;
overflow:hidden;
}

.el-icon-arrow-left{
  cursor:pointer;
}
</style>